<template>
  <a-layout-sider :collapsible="collapsed" :theme="theme">
      <a-menu
          mode="inline"
          :theme="theme"
          :collapsed="collapsed"
          @select="handleMenuChanged"
          :selected-keys="selectedKeys"
          :open-keys="menuExpandKeys"
      >
          <aside-sub-menu v-for="item in menuInfo" :key="item?.name" :menu="item" />
      </a-menu>
  </a-layout-sider>
</template>

<script setup lang="ts">
  import useAlLayoutMenu from '@/layouts/hooks/alLayoutMenu'
  import { useRouter } from 'vue-router'
  import { computed, ref } from 'vue'
  import AsideSubMenu from './AsideSubMenu.vue'
  import LayoutConfig from '@/layouts/layoutConfig.json'
  const collapsed = ref<boolean>(true)

  const router = useRouter()

  const theme = computed(() => {
      if (LayoutConfig.themeSettings === 'DARK_COLOR') {
          return 'dark'
      } else {
          return 'light'
      }
  })

  const { selectedKeys, menuInfo, menuExpandKeys } = useAlLayoutMenu()

  const handleMenuChanged = ({ key }: { key: string }) => {
      router.push({
          name: key
      })
  }
</script>

<style lang="less" scoped>
  :deep(.@{ant-prefix}-layout-sider-children) {
      overflow: auto;
  }
</style>
